import React from 'react'
import {Modal, Button} from 'antd'
import {ExclamationCircleFilled} from '@ant-design/icons'
import styles from './index.less'

type DataType = {
	text: string // 弹窗文案
	title?: string // 标题文案
	onSubmit: () => void // 弹窗确定时触发的事件
	onCancel: () => void // 弹窗取消时触发的事件
	width?: number // 弹窗宽度
	isModalOpen: boolean // 弹窗显示隐藏状态
	setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>> // 修改弹窗显示隐藏状态
	loading?: boolean // 弹窗loading
}

const modal = (props: DataType) => {
	const {
		text,
		title,
		onSubmit,
		onCancel,
		width,
		isModalOpen,
		loading = false,
	} = props

	return (
		<Modal
			className={styles.model}
			width={width || 520}
			title={title || '提示'}
			open={isModalOpen}
			onCancel={onCancel}
			footer={[
				<Button key="back" onClick={onCancel}>
					取消
				</Button>,
				<Button
					key="submit"
					type="primary"
					loading={loading}
					onClick={onSubmit}>
					确定
				</Button>,
			]}>
			<p>
				<ExclamationCircleFilled />
				{text}
			</p>
		</Modal>
	)
}

export default modal
